<template>
  <div class="page-view">
    <!-- 我的班级 -->
    <div
      v-if="MyPackageList.length > 0"
      class="my-div"
    >
      <van-list
        v-model="loading"
        class="list"
        :finished="finished"
        @load="getMyPackageList(pageNum)"
      >
        <RegisteredClass
          v-for="item in MyPackageList"
          :key="item.Id"
          :item="item"
          @IsTimeEnd="onTimeEnded"
        />
      </van-list>
    </div>
    <div
      v-else-if="finished && MyPackageList.length <= 0"
      class="no-class"
    >
      <img
        class="no-img"
        src="~assets/class/no_data.png"
        alt="暂无相关订单"
      >
      <span class="no-text">
        您还没有订单
      </span>
    </div>
    <!-- 猜你喜欢 -->
    <!-- <div
      v-if="InterestClassList.length > 0"
      class="interest-div"
    >
      <div class="interest-text">
        猜你喜欢
      </div>
      <van-list class="list">
        <signatureClass
          v-for="item in InterestClassList"
          :key="item.ClassId"
          :item="item"
          :fun="'isInterest'"
          :user-scholarship="userScholarship"
        />
      </van-list>
    </div>
    <router-link
      v-if="finished"
      class="more-text"
      :to="{name: 'class', query: {moreClass: 1}}"
      tag="div"
    >
      点这里浏览更多感兴趣的班级 +
    </router-link> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import store from '@/store/store'
export default Vue.extend({
  components: {
    RegisteredClass: () => import('components/Class/RegisteredClass.vue'),
    // signatureClass: () => import('components/Home/SignatureClass.vue'),
  },
  data () {
    return {
      MyPackageList: [],
      InterestClassList: [],
      pageSize: 6,
      pageNum: 1,
      loading: true,
      finished: false,
      userScholarship: '0.00',
      scholarFinished: false,
    }
  },
  created () {
    this.getMyPackageList(1)
  },
  methods: {
    onTimeEnded (isCD : boolean) {
      if (isCD) {
        this.finished = false
        this.MyPackageList = []
        this.$router.go(0)
      }
    },
    // 获取我的报名班级
    getMyPackageList (page : number) {
      this.finished = false
      this.$axios({
        url: 'ytjysite/EPackage/GetUserModelList',
        data: {
          Page: page,
          PageSize: this.pageSize,
        },
      }).then(res => {
        this.$set(this.$data, 'MyPackageList',
          [...this.MyPackageList, ...res.Items])
        this.loading = false

        if (this.pageNum * this.pageSize >= res.TotalCount) {
          this.finished = true
        } else {
          this.pageNum++
        }
      })
    },
    // 获取猜你喜欢班级
    getInterestClassList () {
      this.$axios({
        url: 'user/GetInterestClass',
        data: {
          Total: 2,
          ClassId: 0,
        },
      }).then(res => {
        this.$set(this.$data, 'InterestClassList', res)
      })
    },
  },

})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #FFF;
}
.list {
  margin: 0 24px;
  padding: 40px 0;
}
.my-div {
  background: #FFF;
  // border-bottom: 20px solid #F6F6F6;
}
.interest-div {
  width: 100%;
  background: #FFF;
}
.interest-text {
  font-size: 36px;
  color: #333333;
  height: 95px;
  line-height: 95px;
  margin: 0 24px;
  // border-bottom: 1px solid #E9E9E9;
  @include px1border;
}
.no-class {
  text-align: center;
  font-size: 30px;
  color: #666666;
  height: 450px;
  margin-top: 240px;
  .no-img {
    width: 180px;
    // height: 250px;
  }
  .no-text {
    margin-top: 19px;
    display: block;
  }
}
.more-text {
  background: #fff;
  padding: 40px 0;
  font-size: 28px;
  color: $primary-web;
  text-align: center;
}
</style>
